/**
 * Echarts-options大全
 */
import { data1 } from './data'
import { ECBasicOption } from 'echarts/types/dist/shared'
import { taskOptions } from '@/components/echarts/options/zzt-taskOptions'
import { requiredGain } from '@/components/echarts/options/zxt-requiredGain'
export const options: Array<ECBasicOption> = [
  // 多线折线图
  requiredGain,
  // 多块柱状图
  taskOptions,
  // 柱状图
  {
    // 全局调色盘
    color: [
      '#c23531',
      '#2f4554',
      '#61a0a8',
      '#d48265',
      '#91c7ae',
      '#749f83',
      '#ca8622',
      '#bda29a',
      '#6e7074',
      '#546570',
      '#c4ccd3',
    ],
    // 标题
    title: {
      // 文本内容
      text: '柱状图',
    },
    // 提示框
    tooltip: {},
    // x轴数据
    xAxis: {
      data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
      // 线条样式
      axisLine: {
        // 箭头
        symbol: 'arrow',
        lineStyle: {
          // 虚线
          type: 'dashed',
        },
      },
      // 刻度样式
      axisTick: {
        // 长度
        length: 20,
        lineStyle: {
          type: 'dashed',
        },
      },
      // 刻度标签
      axisLabel: {
        // 格式
        formatter: '{value} kg',
        // 对齐方式
        align: 'center',
      },
    },
    // y轴数据
    yAxis: {},
    // 数据
    series: [
      {
        // 名称
        name: '销量',
        // 类型
        type: 'bar',
        // 数据
        data: [5, 20, 36, 10, 10, 20],
        // 局部调色盘。
        color: [
          'rgba(0,143,255,0.91)',
          '#759aa0',
          '#e69d87',
          '#8dc1a9',
          '#ea7e53',
          '#eedd78',
          '#73a373',
          '#73b9bc',
          '#7289ab',
          '#91ca8c',
          '#f49f42',
        ],
        // 是否显示背景
        showBackground: false,
        // 背景颜色
        backgroundStyle: {
          color: 'rgba(220, 220, 220, 0.8)',
        },
        stack: 'A',
      },
      {
        // 名称
        name: '销量',
        // 类型
        type: 'bar',
        // 数据
        data: [5, 20, 36, 10, 10, 20],
        // 局部调色盘。
        color: [
          'rgba(0,143,255,0.91)',
          '#759aa0',
          '#e69d87',
          '#8dc1a9',
          '#ea7e53',
          '#eedd78',
          '#73a373',
          '#73b9bc',
          '#7289ab',
          '#91ca8c',
          '#f49f42',
        ],
        // 是否显示背景
        showBackground: false,
        // 背景颜色
        backgroundStyle: {
          color: 'rgba(220, 220, 220, 0.8)',
        },
        stack: 'A',
      },
    ],
    // 高亮样式
    emphasis: {
      itemStyle: {
        // 高亮时点的颜色。
        color: 'blue',
      },
      label: {
        show: false,
        // 高亮时标签的文字。
        formatter: 'This is a emphasis label.',
      },
    },
  },
  // 气泡图
  {
    title: {
      text: '气泡图',
    },
    backgroundColor: {
      type: 'radial',
      x: 0.3,
      y: 0.3,
      r: 0.8,
      colorStops: [
        {
          offset: 0,
          color: '#f7f8fa',
        },
        {
          offset: 1,
          color: '#cdd0d5',
        },
      ],
    },
    grid: {
      left: 10,
      containLabel: true,
      bottom: 10,
      top: 10,
      right: 30,
    },
    xAxis: {
      // 分割线
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      splitLine: {
        show: false,
      },
      // 偏移
      scale: true,
    },
    series: [
      {
        name: '1990',
        data: data1[0],
        type: 'scatter',
        symbolSize: function (data: any) {
          return Math.sqrt(data[2]) / 5e2
        },
        emphasis: {
          focus: 'series',
          label: {
            show: true,
            formatter: function (param: any) {
              return param.data[3]
            },
            position: 'top',
          },
        },
        // 每一项的样式
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(120, 36, 50, 0.5)',
          shadowOffsetY: 5,
          color: {
            type: 'radial',
            x: 0.4,
            y: 0.3,
            r: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgb(251, 118, 123)',
              },
              {
                offset: 1,
                color: 'rgb(204, 46, 72)',
              },
            ],
          },
        },
      },
      {
        name: '2015',
        data: data1[1],
        type: 'scatter',
        symbolSize: function (data: any) {
          return Math.sqrt(data[2]) / 5e2
        },
        emphasis: {
          focus: 'series',
          label: {
            show: true,
            formatter: function (param: any) {
              return param.data[3]
            },
            position: 'top',
          },
        },
        itemStyle: {
          shadowBlur: 10,
          shadowColor: 'rgba(25, 100, 150, 0.5)',
          shadowOffsetY: 5,
          color: {
            type: 'radial',
            x: 0.4,
            y: 0.3,
            r: 1,
            colorStops: [
              {
                offset: 0,
                color: 'rgb(129, 227, 238)',
              },
              {
                offset: 1,
                color: 'rgb(25, 183, 207)',
              },
            ],
          },
        },
      },
    ],
  },
  // 分类柱状图
  {
    title: {
      text: '分类柱状图',
    },
    xAxis: {
      // 分类信息
      type: 'category',
      // 分类标题
      data: ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],
      splitLine: {
        show: false,
      },
    },
    // 默认y轴
    yAxis: {
      splitLine: {
        show: false,
      },
    },
    // 每一项的数据
    series: [
      {
        type: 'bar',
        name: '2015',
        data: [89.3, 92.1, 94.4, 85.4],
      },
      {
        type: 'bar',
        name: '2016',
        data: [95.8, 89.4, 91.2, 76.9],
      },
      {
        type: 'bar',
        name: '2017',
        data: [97.7, 83.1, 92.5, 78.1],
      },
    ],
  },
  // 饼图
  {
    title: {
      // 文本内容
      text: '饼图',
    },
    dataset: [
      {
        // 这个 dataset 的 index 是 `0`。
        source: [
          ['Product', 'Sales', 'Price', 'Year'],
          ['Cake', 123, 32, 2011],
          ['Cereal', 231, 14, 2011],
          ['Tofu', 235, 5, 2011],
          ['Dumpling', 341, 25, 2011],
          ['Biscuit', 122, 29, 2011],
          ['Cake', 143, 30, 2012],
          ['Cereal', 201, 19, 2012],
          ['Tofu', 255, 7, 2012],
          ['Dumpling', 241, 27, 2012],
          ['Biscuit', 102, 34, 2012],
          ['Cake', 153, 28, 2013],
          ['Cereal', 181, 21, 2013],
          ['Tofu', 395, 4, 2013],
          ['Dumpling', 281, 31, 2013],
          ['Biscuit', 92, 39, 2013],
          ['Cake', 223, 29, 2014],
          ['Cereal', 211, 17, 2014],
          ['Tofu', 345, 3, 2014],
          ['Dumpling', 211, 35, 2014],
          ['Biscuit', 72, 24, 2014],
        ],
        // id: 'a'
      },
      {
        // 这个 dataset 的 index 是 `1`。
        // 这个 `transform` 配置，表示，此 dataset 的数据，来自于此 transform 的结果。
        transform: {
          type: 'filter',
          config: { dimension: 'Year', value: 2011 },
        },
        // 我们还可以设置这些可选的属性： `fromDatasetIndex` 或 `fromDatasetId`。
        // 这些属性，指定了，transform 的输入，来自于哪个 dataset。例如，
        // `fromDatasetIndex: 0` 表示输入来自于 index 为 `0` 的 dataset 。又例如，
        // `fromDatasetId: 'a'` 表示输入来自于 `id: 'a'` 的 dataset。
        // 当这些属性都不指定时，默认认为，输入来自于 index 为 `0` 的 dataset 。
      },
      {
        // 这个 dataset 的 index 是 `2`。
        // 同样，这里因为 `fromDatasetIndex` 和 `fromDatasetId` 都没有被指定，
        // 那么输入默认来自于 index 为 `0` 的 dataset 。
        transform: {
          // 这个类型为 "filter" 的 transform 能够遍历并筛选出满足条件的数据项。
          type: 'filter',
          // 每个 transform 如果需要有配置参数的话，都须配置在 `config` 里。
          // 在这个 "filter" transform 中，`config` 用于指定筛选条件。
          // 下面这个筛选条件是：选出维度（ dimension ）'Year' 中值为 2012 的所有
          // 数据项。
          config: { dimension: 'Year', value: 2012 },
        },
      },
      {
        // 这个 dataset 的 index 是 `3`。
        transform: {
          type: 'filter',
          config: { dimension: 'Year', value: 2013 },
        },
      },
    ],
    series: [
      {
        type: 'pie',
        // 圆度
        radius: 50,
        // 位置 x,y
        center: ['25%', '50%'],
        // 这个饼图系列，引用了 index 为 `1` 的 dataset 。也就是，引用了上述
        // 2011 年那个 "filter" transform 的结果。
        datasetIndex: 1,
      },
      {
        type: 'pie',
        radius: 50,
        center: ['50%', '50%'],
        datasetIndex: 2,
      },
      {
        type: 'pie',
        radius: 50,
        center: ['75%', '50%'],
        datasetIndex: 3,
      },
    ],
  },
  // 综合
  {
    title: {
      // 文本内容
      text: '综合',
    },
    // 提示信息
    tooltip: {
      trigger: 'axis',
      // 线条悬停样式
      axisPointer: { type: 'cross' },
    },
    legend: {},
    xAxis: [
      {
        type: 'category',
        axisTick: {
          // 线在数据中间
          alignWithLabel: true,
        },
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '降水量',
        // 数据范围
        min: 0,
        max: 250,
        // 线条位置 left | right
        position: 'right',
        // 线条标签样式
        axisLabel: {
          formatter: '{value} ml',
        },
      },
      {
        type: 'value',
        name: '温度',
        min: 0,
        max: 25,
        position: 'left',
        axisLabel: {
          formatter: '{value} °C',
        },
      },
    ],
    series: [
      {
        name: '降水量',
        // 图
        type: 'bar',
        yAxisIndex: 0,
        data: [
          {
            value: 6,
            itemStyle: {
              // 高亮时点的颜色。
              color: 'blue',
            },
          },
          32,
          70,
          86,
          68.7,
          100.7,
          125.6,
          112.2,
          78.7,
          48.8,
          36.0,
          19.3,
        ],
      },
      {
        name: '温度',
        // 线
        type: 'line',
        // 平滑
        smooth: true,
        yAxisIndex: 1,
        data: [6.0, 10.2, 10.3, 11.5, 10.3, 13.2, 14.3, 16.4, 18.0, 16.5, 12.0, 5.2],
      },
    ],
  },
  // 图例（图的说明）
  {
    title: {
      // 文本内容
      text: '图例',
    },
    legend: {
      // Try 'horizontal'
      // 方向
      orient: 'vertical',
      right: 10,
      // 顶部对齐
      top: 'center',
      // 图标较多滚动
      type: 'scroll',
    },
    dataset: {
      source: [
        ['product', '2015', '2016', '2017'],
        ['Matcha Latte', 43.3, 85.8, 93.7],
        ['Milk Tea', 83.1, 73.4, 55.1],
        ['Cheese Cocoa', 86.4, 65.2, 82.5],
        ['Walnut Brownie', 72.4, 53.9, 39.1],
      ],
    },
    xAxis: { type: 'category' },
    yAxis: {},
    series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }],
  },
  // 折线图
  {
    title: {
      text: '折线图',
    },
    xAxis: {},
    yAxis: {},
    series: [
      {
        smooth: true,
        data: [
          [20, 120],
          [50, 200],
          [40, 50],
        ],
        type: 'line',
        lineStyle: {
          // 基础线条样式
          normal: {
            color: 'green',
            width: 4,
            type: 'dashed',
          },
        },
        // 线条显示数值
        label: {
          show: true,
          position: 'bottom',
          textStyle: {
            fontSize: 20,
            color: 'blue',
          },
        },
        stack: 'x',
        areaStyle: {},
      },
      {
        // 平滑样式
        smooth: true,
        data: [
          [20, 120],
          [50, 200],
          [40, 50],
        ],
        type: 'line',
        lineStyle: {
          // 基础线条样式
          normal: {
            color: 'green',
            width: 4,
            type: 'dashed',
          },
        },
        // 线条显示数值
        label: {
          show: true,
          position: 'bottom',
          textStyle: {
            fontSize: 20,
            color: 'blue',
          },
        },
        stack: 'x',
        // 设置区域样式
        areaStyle: {
          color: '#ff0',
          opacity: 0.5,
        },
      },
    ],
  },
  // 饼图
  {
    title: {
      text: '饼图',
    },
    series: [
      {
        stillShowZeroSum: false,
        type: 'pie',
        data: [
          {
            value: 335,
            name: '直接访问',
          },
          {
            value: 234,
            name: '联盟广告',
          },
          {
            value: 1548,
            name: '搜索引擎',
          },
        ],
      },
    ],
  },
  // 圆环图
  {
    title: {
      text: '圆环图',
    },
    legend: {
      orient: 'vertical',
      x: 'left',
      data: ['A', 'B', 'C', 'D', 'E'],
    },
    series: [
      {
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
          emphasis: {
            show: true,
          },
        },
        labelLine: {
          show: false,
        },
        emphasis: {
          label: {
            show: true,
            fontSize: '30',
            fontWeight: 'bold',
          },
        },
        data: [
          { value: 335, name: 'A' },
          { value: 310, name: 'B' },
          { value: 234, name: 'C' },
          { value: 135, name: 'D' },
          { value: 1548, name: 'E' },
        ],
      },
    ],
  },
]
